<div fxLayout="row" fxLayout.xs="column" class="form-container">
  <form #formDirective="ngForm" fxFlex="50" fxFlex.md="70" [formGroup]="userPasswordForm"
    (ngSubmit)="onSubmit(formDirective)" class="container">
      <mat-progress-bar mode='indeterminate' *ngIf='loading'></mat-progress-bar>
      <mat-form-field class="full-width-input">
        <mat-label>Old Password</mat-label>
        <input type="password" matInput
          formControlName="oldPassword" required>
        <mat-error *ngIf="isFieldInvalid('oldPassword', 'required')">Please inform the old password</mat-error>
      </mat-form-field>
      <mat-form-field class="full-width-input">
        <mat-label>New Password</mat-label>
        <input type="password" matInput
          formControlName="newPassword" required>
          <mat-error *ngIf="isFieldInvalid('newPassword', 'required')">Please inform the new password</mat-error>
          <mat-error *ngIf="isFieldInvalid('newPassword', 'minlength')">Password should be at least 6 character</mat-error>
      </mat-form-field>
      <mat-form-field class="full-width-input">
        <mat-label>Confirm New Password</mat-label>
        <input type="password" matInput [errorStateMatcher]="matcher"
          formControlName="confirmNewPassword">
        <mat-error *ngIf="isPasswordMatchInvalid()">Passwords do not match</mat-error>
      </mat-form-field>
      <div class="action-buttons">
          <button mat-raised-button color="primary" cdkFocusInitial>Update Password</button>
      </div>
    </form>
  </div>
